﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="catalogColors.aspx.cs" Inherits="catalogColors" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Catalogo Banners</title>
    <style type="text/css">
        .fontLabel
        {
            font-family: Calibri;
            font-size: medium;
        }
        .textField
        {
            padding-left: 15px;
        }
        .buttonExtNet
        {
            height: 22px;
            vertical-align: bottom;
        }
    </style>
    <script type="text/javascript">
        var messageLoading = 'Cargando...';
        function fnOnClick(sender, e) {
            if (e == 'Edit' || e == 'New') {
                var id = 0;
                if (e == 'Edit') {
                    id = sender.Id;
                }
                App.direct.ShowDetails(id);
            } else if (e == 'Delete') {
                var messageConfirm = 'Esta seguro que desea eliminar el Registro seleccionado?';
                var messageConfirmationTitle = 'Confirmacion';
                Ext.MessageBox.confirm(messageConfirmationTitle, messageConfirm, function (btn) {
                    if (btn == 'yes') {
                        if (sender.Id) {
                            App.direct.DeleteCategory(sender.Id);
                        }
                    }
                });
            }
        }
        var employeeDetailsRender = function () {
            return '<img class="imgEdit" ext:qtip="Click to view/edit additional details" style="cursor:pointer;" src="vcard_edit.png" />';
        };

        var cellClick = function (view, cell, columnIndex, record, row, rowIndex, e) {
            var t = e.getTarget(),
                columnId = this.columns[columnIndex].id; // Get column id

            if (t.className == "imgEdit" && columnId == "Details") {
                //the ajax call is allowed
                return true;
            }

            //forbidden
            return false;
        };

        var setColor = function (el, color) {
            if (Ext.isEmpty(color, false)) {
                return;
            }

            var div = Ext.get('lblshowcolor');
            div.setStyle('background-color', '#' + color);
        };

    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManagerCatalog" runat="server" />
        <ext:Viewport ID="ViewPortSite" runat="server" Layout="FitLayout">
            <Items>
                <ext:Panel ID="Panel1" Layout="FitLayout" runat="server">
                    <Items>
                        <ext:Panel ID="pnlColors" runat="server" Icon="Application" Border="false" Header="false"
                            Closable="false">
                            <Items>
                                <ext:FormPanel ID="pnlColorsCatalog" runat="server" Title="Catalogo Colores" Icon="ColorWheel"
                                    DefaultAnchor="100%" BodyPadding="5">
                                    <Items>
                                        <ext:FieldSet ID="FieldSet1" runat="server">
                                            <Items>
                                                <ext:FieldContainer ID="fieldcontainer2" runat="server" Layout="HBoxLayout" Margin="10">
                                                    <Items>
                                                        <ext:TextField ID="txtNombre" runat="server" FieldLabel="Nombre" Name="txtNombre"
                                                            AllowBlank="false" />
                                                        <ext:TextField ID="txtHexColor" runat="server" FieldLabel="HexColor" Name="txtHexColor"
                                                            AllowBlank="false" />
                                                        <ext:Label ID="lblshowcolor" runat="server" Width="60" Height="22" >
                                                        </ext:Label>
                                                        <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                                                        </ext:ToolbarSeparator>
                                                        <ext:Button ID="btnAddColor" runat="server" Text="Agregar Color">
                                                            <DirectEvents>
                                                                <Click OnEvent="AddClick" Before="if (!#{pnlColorsCatalog}.getForm().isValid()) { return false; }">
                                                                    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{pnlColors}.body}" />
                                                                    <ExtraParams>
                                                                        <ext:Parameter Name="hexcolor" Value="#{txtHexColor}.getValue()" Mode="Raw" />
                                                                        <ext:Parameter Name="name" Value="#{txtNombre}.getValue()" Mode="Raw" />
                                                                    </ExtraParams>
                                                                </Click>
                                                            </DirectEvents>
                                                        </ext:Button>
                                                    </Items>
                                                </ext:FieldContainer>
                                                <ext:FieldContainer runat="server" ID="fieldcontainerColorPicker" Layout="HBoxLayout"
                                                    Margin="10">
                                                    <Items>
                                                        <ext:ColorPicker ID="colorpicker" runat="server">
                                                            <DirectEvents>
                                                                <Select OnEvent="AjaxColor_Changed" />
                                                            </DirectEvents>
                                                        </ext:ColorPicker>
                                                    </Items>
                                                </ext:FieldContainer>
                                                <ext:FieldContainer ID="fieldcontainer3" runat="server">
                                                    <Items>
                                                        <ext:GridPanel ID="gridColors" runat="server" ClientIDMode="Static" AutoScroll="true"
                                                            AutoHeight="true" Border="true">
                                                            <Store>
                                                                <ext:Store ID="storeColors" runat="server" FilterOnLoad="false">
                                                                    <Model>
                                                                        <ext:Model ID="Model5" runat="server" IDProperty="Id">
                                                                            <Fields>
                                                                                <ext:ModelField Name="Id" />
                                                                                <ext:ModelField Name="Nombre" />
                                                                                <ext:ModelField Name="HexColor" />
                                                                            </Fields>
                                                                        </ext:Model>
                                                                    </Model>
                                                                </ext:Store>
                                                            </Store>
                                                            <ColumnModel>
                                                                <Columns>
                                                                    <ext:TemplateColumn ID="TemplateColumn2" runat="server" Text="Color" Flex="15" DataIndex="HexColor"
                                                                        TemplateString='<div style="width:50px;height:20px; background-color:{HexColor};"></div>' />
                                                                    <ext:Column ID="Column1" runat="server" Text="Id" Flex="35" DataIndex="Id" />
                                                                    <ext:Column ID="Column2" runat="server" Text="Nombre" Flex="35" DataIndex="Nombre" />
                                                                </Columns>
                                                            </ColumnModel>
                                                            <Features>
                                                                <ext:GridFilters Enabled="false">
                                                                </ext:GridFilters>
                                                            </Features>
                                                            <View>
                                                                <ext:GridView ID="GridView2" runat="server" EmptyText="Sin registros para mostrar" />
                                                            </View>
                                                            <SelectionModel>
                                                                <ext:RowSelectionModel ID="RowSelectionModelHome" runat="server" Mode="Single" />
                                                            </SelectionModel>
                                                            <Buttons>
                                                                <ext:Button ID="btnDeleteColor" runat="server" Text="Eliminar">
                                                                    <DirectEvents>
                                                                        <Click OnEvent="btnDeleteColor_Click">
                                                                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{pnlColors}.body}" />
                                                                            <ExtraParams>
                                                                                <ext:Parameter Name="idValues" Value="Ext.encode(#{gridColors}.getRowsValues({selectedOnly : true}))"
                                                                                    Mode="Raw" />
                                                                            </ExtraParams>
                                                                        </Click>
                                                                    </DirectEvents>
                                                                </ext:Button>
                                                            </Buttons>
                                                        </ext:GridPanel>
                                                    </Items>
                                                </ext:FieldContainer>
                                            </Items>
                                        </ext:FieldSet>
                                    </Items>
                                </ext:FormPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>
